<template>
    <button
        class="zx-button"
        :disabled="disabled || loading"
        :autofocus="autofocus"
        :type="nativeType"
        :class="[
            type ? 'zx-button--' + type : '',
            size ? 'zx-button--' + size : '',
            {
                'is-disabled': disabled,
                'is-loading': loading,
                'is-plain': plain,
                'is-round': round,
                'is-circle': circle
            }
        ]"
        @click="onClick"
    >
        <div style="display:flex;justify-content: center;align-items: center;">
            <i v-if="loading" class="zx-icon-loading" :style="{ 'font-size': iconSize}" />
            <i v-if="icon && !loading" :class="icon" />
            <span v-if="$slots.default">
                <slot />
            </span>
        </div>
    </button>
</template>
<script>
export default {
    name: 'ZxButton',

    props: {
        type: {
            type: String,
            default: 'default',
        },

        size: String,

        icon: {
            type: String,
            default: '',
        },

        iconSize: {
            type: String,
            default: '20px',
        },

        nativeType: {
            type: String,
            default: 'button',
        },

        loading: Boolean,

        disabled: Boolean,

        plain: Boolean,

        autofocus: Boolean,

        round: Boolean,

        circle: Boolean,
    },

    methods: {
        onClick(evt) {
            this.$emit('click', evt);
        },
    },
};
</script>
